<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltips</title>
    <link href="demo.css" rel="stylesheet">
    <script src="jquery.js"></script>

    <link href="dist/css/H.min.css" rel="stylesheet" type="text/css">
    <script src="dist/js/H.min.js"></script>
    <style>
        .demo-div{
            margin-top: 30px;
            padding: 10px 0;
            font-size: 14px;
            font-family: 微软雅黑;
            line-height: 1.5;
        }

        .tpl{
            width: 600px;
            padding: 10px 0;
        }
        .tpl table{
            width: 100%;
            border-collapse: collapse;
        }
        .tpl th{
            height: 40px;
        }
        .tpl td{
            height: 30px;
        }
        .tpl td, .tpl th{
            padding: 0 10px;
            border: 1px solid #ccc;
        }

        .demo-link {
            position: relative;
            text-decoration: none;
        }
        .demo-link .ui-tooltips{
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Tooltips</h2>
    <ul>
        <li>使用方法请看源代码及注释</li>
    </ul>

    <div style="height: 50px"></div>
    <h2>Demo</h2>
    <p style="padding: 10px 0; line-height: 25px; font-size: 14px;">
        利用 UI 库的 Tooltips 来实现的效果。用起来肯定不如直接使用插件便利，但效果绝对让人满意~<br>
        和表单验证插件一样，放弃了使用便利性，追求 DOM 可控性 and 视觉效果
    </p>
    <br><br>
    <a href="####" id="J-button-demo01" title="标题很长，这里截字了，实际上后面应该还有一大堆废话没办法展示出来" class="demo-link">
        标题很长，这里截字了...
    </a>
    <br><br><br>
    <a href="####" id="J-button-demo02" class="demo-link">
        弹窗里显示html内容
    </a>

    <div style="height: 300px;"></div>

    <script type="text/html" id="J-tpl-demo01">
        <div class="tpl">
            <table>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>30</td>
                    <td>男</td>
                </tr>
            </table>
        </div>
    </script>
</div>

<script type="text/javascript">
    H.Tooltips.create({
        target : $('#J-button-demo01'),
        content : function(){ return $('#J-button-demo01').attr('title'); },
        width : 200
    });

    H.Tooltips.create({
        target : $('#J-button-demo02'), //需要添加 tooltips 的目标元素 【JqueryObject】  必传！！
        content : $('#J-tpl-demo01').html(), //提示框内容，类型可以是【string】或【function】，如果是【function】，要求该函数必须返回一个字符串
        side : 'bottom', //提示框展示在目标元素的哪一边【string】（取值范围：'top'， 'bottom'， 'left'， 'right'）
        contSide : 'right', //提示框内容部分展示配置，与 side 配合使用【string】（side 为 left 或 right 时的取值范围：'top'，'bottom'，'middle'; side 为 top 或 bottom 时的取值范围：'left'，'right'，'middle'; 注意，设置此属性后，插件将不会自动判断展示哪一侧）
        theme : 'info', //提示框主题【string】（默认值：''， 取值范围：''， 'info'， 'success'， 'warning'， 'error'）
        position : {
            top : 0,
            left : 0
        }, //用来调整提示框的位置偏移【Object - Int】
        width : 0, //提示框的宽度【Int】（默认值：0， 默认情况下，宽度是自适应的，但是当 content 的内容是纯文本时，请务必设置 tooltips 宽度，否则可能会出现意想不到的意外结果出现）
        eventShow : 'click', //提示框显示触发事件【string】（默认值:'mouseenter'）
        eventHide : 'blur', //提示框隐藏触发事件【string】（默认值:'mouseleave'，当 eventShow 的值为 'click' 时，eventHide 会被强行无效化。改为点击提示框以外的区域触发隐藏）
        //提示框显示后的回调【function】，有一个参数，传入的是生成的提示框的 JqueryObject
        onShow : function ($toolTips) {
            //alert('提示框显示了~');
        },
        //提示框隐藏后的回调【function】，有一个参数，传入的是生成的提示框的 JqueryObject
        onHide : function ($toolTips) {
            //$toolTips.find('table').css('visibility', 'hidden');
            //alert('提示框隐藏了~');
        }
    });
</script>
</body>
</html>
